<template>
    <FlexContainer>
        <template slot="rightBottom">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="第一个表格" name="first">
                    <TableAutomaticNew
                        ref="aviationtable" 
                        :checkedField="checkedField[gridTag[0]]"
                        :manageColumn="manageColumn[gridTag[0]]"
                        :fieldConfig="fieldConfig[gridTag[0]]" 
                        :preColumns="preColumns[gridTag[0]]" 
                        :pagesize.sync="pagesize[gridTag[0]]" 
                        :page.sync="page[gridTag[0]]" 
                        :total="total[gridTag[0]]" 
                        :pinned="pinned[gridTag[0]]"
                        :gridTag="gridTag[0]" 
                        exportIcon="airplane/material/export" 
                        :tableData="pageTable.firstTableData" 
                        @pagination="handleGetFirstTableListByParams()" 
                        @modify="handleFirstTableRowAddEvent($event, true)"
                        @remove="handleFirstTableRowRemoveEvent"
                        >
                        <template slot="query">
                            <TableSearchForm
                                ref="firstsearchform"
                                :leftBtnGroup="queryForm.leftBtnGroup"
                                :openSearchProps="queryForm.openSearchProps"
                                :hideSearchProps="queryForm.hideSearchProps"
                                :searchpanel="queryForm.searchpanel"
                                @search="handleGetFirstTableListByParams">
                            </TableSearchForm>
                        </template>
                        <template slot="pageLeft">
                            <el-button type="primary">批量删除</el-button>
                        </template>
                    </TableAutomaticNew>
                </el-tab-pane>
                <el-tab-pane label="第二个表格" name="second">
                    <TableAutomaticNew
                        ref="aviationtable" 
                        :checkedField="checkedField[gridTag[1]]"
                        :manageColumn="manageColumn[gridTag[1]]"
                        :fieldConfig="fieldConfig[gridTag[1]]" 
                        :preColumns="preColumns[gridTag[1]]" 
                        :pagesize.sync="pagesize[gridTag[1]]" 
                        :page.sync="page[gridTag[1]]" 
                        :total="total[gridTag[1]]" 
                        :pinned="pinned[gridTag[1]]"
                        :gridTag="gridTag[1]" 
                        exportIcon="airplane/material/export" 
                        :tableData="pageTable.secondTableData" 
                        @pagination="handleGetSecondTableListByParams()" 
                        @modify="handleSecondTableRowAddEvent($event, true)"
                        @remove="handleSecondTableRowRemoveEvent"
                        >
                        <template slot="query">
                            <TableSearchForm
                                ref="secondsearchform"
                                :leftBtnGroup="queryForm.leftBtnGroup"
                                :openSearchProps="queryForm.openSearchProps"
                                :hideSearchProps="queryForm.hideSearchProps"
                                :searchpanel="queryForm.searchpanel"
                                @search="handleGetSecondTableListByParams">
                            </TableSearchForm>
                        </template>
                        <template slot="pageLeft">
                            <el-button type="primary">批量删除</el-button>
                        </template>
                    </TableAutomaticNew>
                </el-tab-pane>
            </el-tabs>
        </template>
    </FlexContainer>
</template>
<script>
    // 布局组件
    import FlexContainer from '@/components/Layout/FlexContainer.vue';

    // 表格组件
    import {
        TableAutomaticNew,
        TableSearchForm,
        doubletable
    } from '@/components/ElementTable'

    // 表格固定字段
    import {
        getTableDataList,
        getTableFieldConfig
    } from './components/fieldConfig'

    export default {
        name: 'DoubleTable',
        components: {
            FlexContainer,
            TableAutomaticNew,
            TableSearchForm,
        },
        mixins: [doubletable],
        props: {},
        data() {
            return {
                activeName: 'first',

                queryForm: {
                    // 按钮操作
                    leftBtnGroup: [
                        {
                            name: '新增',
                            onClick: () => this.handleAddEvent()
                        },
                        {
                            name: '导入',
                            onClick: () => this.handleImportEvent()
                        }
                    ],
                    
                    // 可视查询条件
                    openSearchProps: [
                        {
                            type: 'input',
                            name: '输入条件',
                            key: 'input_data',
                        },
                        {
                            type: 'select',
                            name: '选择条件',
                            key: 'select_data',
                            defaultValue: '0',
                            selectList: [
                                { name: '全部', key: '0' },
                                { name: '类型A', key: '1' },
                                { name: '类型B', key: '2' }
                            ],
                            onChange: (row) => this.hanleSelectChange(row)
                        },
                    ],
                    
                    // 隐藏查询条件
                    hideSearchProps: [
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data1'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data2'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data3'
                        },
                    ],
                    
                    // 右上角 C 位查询
                    searchpanel: {
                        placeholder: '请输入右上角关键字',
                        type: 'input',
                        key: 'lock_data',
                    }
                },


                // 表格标签
                gridTag: ['first_table', 'second_table'],

                // 页面表格
                pageTable: {
                    // 表格数据
                    firstTableData: [],
                    // 
                    secondTableData: [],
                },

                // elementTree
                pageTree: {
                    // 当前选中
                    activeSelect: {},
                    // 树的数据 
                    treeData: [],

                    treeRule: {
                        
                    }
                },
            }
        },
        computed: {
            
        },
        methods: {
            /**
             * 
             * 第一个表格的
             * 
             */
            handleGetFirstTableListByParams() {
                // 获取参数
                const params = this.$refs['firstsearchform'].handleCommitSearchPamras()
                const firstTableGrid = this.gridTag[0]
                // 合并分页参数或者其他参数
                const queryParams = Object.assign({}, params, { 
                    page: this.page[firstTableGrid], 
                    pagesize: this.pagesize[firstTableGrid] 
                })
                console.log('handleGetFirstTableListByParams', queryParams)
                this.pageTable.firstTableData = getTableDataList(this.fieldConfig[firstTableGrid], this.pagesize[firstTableGrid])
            },

            handleFirstTableRowRemoveEvent(row) {
                console.log('handleFirstTableRowRemoveEvent', row)
            },

            handleFirstTableRowAddEvent(row) {
                console.log('handleFirstTableRowAddEvent', row)
            },


            /**
             * 
             * 第二个表格的
             * 
             */
            handleGetSecondTableListByParams() {
                // 获取参数
                const params = this.$refs['secondsearchform'].handleCommitSearchPamras()
                const secondTableGrid = this.gridTag[1]
                // 合并分页参数或者其他参数
                const queryParams = Object.assign({}, params, { 
                    page: this.page[secondTableGrid], 
                    pagesize: this.pagesize[secondTableGrid] 
                })
                console.log('handleGetSecondTableListByParams', queryParams)
                this.pageTable.secondTableData = getTableDataList(this.fieldConfig[secondTableGrid], this.pagesize[secondTableGrid])
            },

            handleSecondTableRowRemoveEvent(row) {
                console.log('handleSecondTableRowRemoveEvent', row)
            },

            handleSecondTableRowAddEvent(row) {
                console.log('handleSecondTableRowAddEvent', row)
            },


        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {
            // 初始化表格操作内容
            this.gridTag.forEach(item => {
                this.$set(this.fieldConfig, item, getTableFieldConfig(10))
                this.$set(this.manageColumn, item, [{
                        name: '修改',
                        icon: 'el-icon-edit-outline',
                        event: 'modify'
                    },
                    {
                        name: '删除',
                        icon: 'el-icon-delete',
                        event: 'remove'
                    },
                ])
            })
            this.$set(this.preColumns, this.gridTag[0], ['index'])
            this.$set(this.preColumns, this.gridTag[1], ['checkbox'])
        },
        mounted() {
            this.handleGetFirstTableListByParams()
            this.handleGetSecondTableListByParams()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>

</style>